<template>
  <div class="liveTop">
    <div class="liveInfo">
      <div class="liveInfo_left" @click="goToHome">
        <van-image round width="40" height="40" :src="liveRoomInfo.roomImageUrlPreview" fit="cover" />
      </div>
      <div class="liveInfo_center">
        <div class="title"> {{ liveRoomInfo.roomName }} </div>
        <div class="hot" v-if="isHeat"> 热度：{{ heatNum }}万 </div>
      </div>
      <div class="liveInfo_right">
        <van-button round type="danger" @click="clickConcern">
          <van-icon name="plus" v-if="!isConcern" style="font-size: 16px; font-weight: 700;" />
          <span v-if="!isConcern" style="font-size: 16px;font-weight: 700;">关注</span>
          <span v-else style="font-size: 16px;font-weight: 700;">已关注</span>
        </van-button>
      </div>
    </div>
    <div class="onlineNum" v-if="isOnline">
      {{ onlineNum }}
    </div>
  </div>
</template>

<script setup>
import { getLiveIsFollowApi, addLiveIsFollowApi, deleteLiveIsFollowApi } from '@/api/live/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  liveRoomId: {
    type: String,
    required: true,
  },
})
const data = ref({
  liveRoomId: props.liveRoomId,
  liveId: '252667190782017536'
})
watch(
  () => props.liveRoomId,
  (newValue) => {
    if (newValue) {
      getLiveIsFollow()
      getLiveRoomInfo()
      data.value.liveRoomId = newValue
    }
  },
  { immediate: true } // 立即执行一次
);
//#region 关注
const isConcern = ref(false) // 关注
// 获取关注状态
function getLiveIsFollow() {
  getLiveIsFollowApi(props.liveRoomId).then(res => {
    if (res.code == 200) {
      isConcern.value = res.data
    }
  })
}
// 点击关注事件
function clickConcern() {
  if (!isConcern.value) {
    addLiveIsFollowApi(data.value).then(res => {
      if (res.code == 200) {
        console.log('关注成功', res);
        isConcern.value = !isConcern.value
      }
    })
  } else {
    deleteLiveIsFollowApi(data.value).then(res => {
      if (res.code == 200) {
        console.log('取消关注成功', res);
        isConcern.value = !isConcern.value
      }
    })
  }
}


//#endregion

//#region 直播间信息
import { getLiveRoomInfoApi } from '@/api/live/index.js'
const liveRoomInfo = ref({}) // 直播间信息
function getLiveRoomInfo() {
  getLiveRoomInfoApi(props.liveRoomId).then(res => {
    if (res.code == 200) {
      liveRoomInfo.value = res.data
    }
  })
}

//#endregion

//#region 热度和在线人数
import emitter from '@/utils/mitt'

const isHeat = ref(false)        // 热度
const heatNum = ref(0)
const isOnline = ref(false)      // 在线人数
const onlineNum = ref(0)
emitter.on('isHeatMitt', param => {
  isHeat.value = param
})
emitter.on('isOnlineMitt', (param) => {
  isOnline.value = param
})
//#endregion

// 跳转首页
function goToHome() {
  router.push('/home')
}
</script>

<style lang="scss" scoped>
.liveTop {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;

  .liveInfo {
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    margin: 5px 0 0 5px;
    font-size: 16px;
    border-radius: 100px;
    padding: 3px 5px;

    .liveInfo_left {
      margin-right: 10px;
      display: flex;
    }

    .liveInfo_right {
      margin-left: 10px;
    }
  }

  .onlineNum {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    margin: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2px 10px;
    border-radius: 10px;
    color: #fff;
  }
}

:deep(.van-button) {
  height: 100%;
  line-height: 2;
}

:deep(.van-button--normal) {
  padding: 0 12px 0 10px;
}
</style>